/**
*@author       wuwg
*@createTime   2018/03/20
*@updateTime   2018/03/22
*@description
*@rule
 */
@import "../../../config/config.less";

// col 布局前缀
@css-prefix-col: ~"@{css-prefix}col";
.@{css-prefix-col}{
    position: relative;
    float: left;
}
//  浮动列
.float-grid-columns(@class) {
    // initial
    .col(@index) {
        //  声明变量 @item : .@{@css-prefix-col}-span@{class}-@{index}
        //  @item : .aty-col-sapn-1
        @item: ~".@{css-prefix-col}-span@{class}-@{index}";
        .col((@index + 1), @item);
    }
    .col(@index, @list) when (@index =< @grid-columns) { // general
        @item: ~".@{css-prefix-col}-span@{class}-@{index}";
        // 循环调用
        // @list ：组装成组选择器
        .col((@index + 1), ~"@{list}, @{item}");
    }
    .col(@index, @list) when (@index > @grid-columns) { // terminal
        @{list} {
            float: left;
            flex: 0 0 auto;
        }
    }
    .col(1); // kickstart it
}
.loop-grid-columns(@index, @class) when (@index > 0) {
    // span 百分比
    .@{css-prefix-col}-span@{class}-@{index} {
        display: block;
        width: percentage((@index / @grid-columns));
    }
    // push 左定位偏移
    .@{css-prefix-col}@{class}-push-@{index} {
        left: percentage((@index / @grid-columns));
    }
    // pull 右定位偏移
    .@{css-prefix-col}@{class}-pull-@{index} {
        right: percentage((@index / @grid-columns));
    }
    // offset  左margin-left偏移
    .@{css-prefix-col}@{class}-offset-@{index} {
        margin-left: percentage((@index / @grid-columns));
    }
    // order  flex布局下的排列顺序
    .@{css-prefix-col}@{class}-order-@{index} {
        order: @index;
    }
    // 循环
    .loop-grid-columns((@index - 1), @class);
}
// 当 @index =0 那么就隐藏
.loop-grid-columns(@index, @class) when (@index = 0) {
    .@{css-prefix-col}-span@{class}-@{index} {
        display: none;
    }
    .@{css-prefix-col}@{class}-push-@{index} {
        left: auto;
    }
    .@{css-prefix-col}@{class}-pull-@{index} {
        right: auto;
    }
}
// 生成栅格化函数，默认 @class='';
.make-grid(@class: ~'') {
    .float-grid-columns(@class);
    .loop-grid-columns(@grid-columns, @class);
}

// 第一次执行
.make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
//  480 -xs 最小屏幕
@media (min-width: @screen-xs-min) {
    .make-grid(-xs);
}

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//  768px sm 小屏幕
@media (min-width: @screen-sm-min) {
    .make-grid(-sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//  992px sm 小屏幕
@media (min-width: @screen-md-min) {
    .make-grid(-md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//  1200px sm 大屏幕
@media (min-width: @screen-lg-min) {
    .make-grid(-lg);
}
